<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <canvas id="arc" width="500" height="500" style="border: 2px solid #00f;"></canvas>

  <script>
    let span = document.createElement('span')
    span.style.fontSize = '100px'
    span.style.color = 'purple'

    const canvas = document.getElementById('arc')
    const ctx = canvas.getContext('2d')

    ctx.lineWidth = 10
    ctx.strokeStyle = 'skyblue'
    let step = Math.PI * 2 / 360
    let count = 0
    let timerId = setInterval(() => {
      count++;
      proNum(count)
      if (count >= 360) { // 整圆时停止
        clearInterval(timerId)
      }
      ctx.beginPath()
      // ctx.arc(250, 250, 200, -Math.PI / 2, Math.PI * 2 - Math.PI / 2, false)
      ctx.arc(250, 250, 200, -Math.PI / 2, step * count - Math.PI / 2, false)
      ctx.stroke()
    }, 10);

    function proNum(count) {
      span.innerText = parseInt(100 / 360 * count) + '%'
      document.body.appendChild(span)
    }
  </script>

</body>

</html>